import { ArrowLeftOutlined, CheckOutlined } from '@ant-design/icons';
import { Button, Form, Input } from 'antd';
import 'antd/dist/antd.css';
import moment from 'moment';
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { FMT_DD } from '../../common/constant';
import Home from '../../common/home';
import http from '../../common/http';
import MyMarkdown from '../../common/MyMarkdown';

const { TextArea } = Input

class ImportNoteForm extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            content: "",
            nowDay: moment().format(FMT_DD)
        }
    }

    onContentChange = (e) => {
        e.preventDefault()
        let content = e.target.value
        this.setState({ content })
    }

    onCancel = (e) => {
        e.preventDefault()
        this.props.navigate(-1)
    }

    handleSubmit = (e) => {
        e.preventDefault()
        this.props.form.validateFields()
            .then((values) => {
                const obj = { ...values }
                console.log('request: ', obj)
                http.post("/api/note/note/import-notes", obj)
                    .then(res => {
                        console.log('res: ', res.data)
                        this.props.navigate(-1)
                    })
            })
            .catch(err => console.info("err"))
    }

    render() {
        // const { getFieldDecorator } = this.props.form
        return (
            <div>
                <Home />

                <div>
                    <div style={{
                        width: '50%',
                        float: 'left',
                        height: '100%',
                    }}>
                        <Form layout="vertical" form={this.props.form} hideRequiredMark>
                            <Form.Item name="content" label="导入内容（Morkdown 格式）">
                                <TextArea autoSize={{ minRows: 15 }} // , maxRows: 40
                                    onChange={this.onContentChange}
                                    placeholder={`
# 月（如：02 或 2020-02。此行可省略）

---
## 日期（如：09）
### 类型名 1
#### 笔记标题 1
- 笔记内容 22

#### 笔记标题 2
- 笔记内容 33

### 类型名 2
#### 笔记标题 a1
- 笔记内容 44

#### 笔记标题 b2
- 笔记内容 cc

---
## 日期（如：10）
### 类型名 1
#### 笔记标题 d2
- 笔记内容 d22
`}
                                />
                            </Form.Item>
                        </Form>
                        <Button onClick={this.onCancel} style={{ marginRight: 8 }}> <ArrowLeftOutlined /> 取消 </Button>
                        <Button onClick={this.handleSubmit} type="primary"> <CheckOutlined /> 提交 </Button>
                    </div>

                    <div style={{
                        position: 'absolute',
                        right: 0,
                        bottom: 0,
                        width: '50%',
                        float: 'right',
                        height: '100%',
                        borderLeft: '1px solid #e9e9e9',
                        padding: '10px 16px',
                        background: '#fff',
                        textAlign: 'left',
                    }}>
                        <h3 style={{ marginBottom: 16 }}>{this.state.title}</h3>
                        <MyMarkdown source={this.state.content} />
                    </div>
                </div>
            </div>
        );
    }
}

// export default ImportNoteForm
function WithNavigate(props) {
    let [form] = Form.useForm(); // 用作组件返回时才有用
    let navigate = useNavigate(); // 用作组件返回时才有用
    return <ImportNoteForm {...props} form={form} navigate={navigate} />
}
export default WithNavigate